import React from "react";
import Navbar from "../../components/Navbar/Navbar";
import calendarSvg from "../../assets/svg/calendar.svg";
import ThemeContext from "../../store/themeContext";
import { useContext, useEffect } from "react";
import BudgetBall from "../../components/BudgetBall/BudgetBall";
import MenuTitle from "../../components/MenuTitle/MenuTitle";
import classes from "./Savings.module.scss";
import More from "../../components/More/More";
import phoneSvg from "../../assets/svg/Savings/phone.svg";
import trafficSvg from "../../assets/svg/Savings/traffic.svg";
import LineList from "../../components/LineList/LineList";
let menuData = [
    { name: "New Bike", allPrice: 600, usedPrice: 300, picUrl: trafficSvg },
    { name: "Iphone 12 Pro", allPrice: 999, usedPrice: 700, picUrl: phoneSvg },
];
export default function Savings() {
    const { changeShow, theme } = useContext(ThemeContext);
    useEffect(() => {
        changeShow(false);
        return () => {
            changeShow(true);
        };
    }, [changeShow]);
    return (
        <div className={classes.savings} style={{ backgroundColor: theme === "light" ? "#fdfdfe" : "#121212" }}>
            <Navbar linkName={"Savings"} />
            <BudgetBall theme={theme}>
                <span className={classes.ballTitle} style={{ color: theme === "light" ? "#2f2f2f" : "#fff" }}>
                    Current Savings
                </span>
            </BudgetBall>
            <div className={classes.presentation} style={{ backgroundColor: theme === "light" ? "#fff" : "#000", color: theme === "light" ? "#222" : "#fff" }}>
                <div className={classes.title}>
                    <div className={classes.left}>
                        <img style={{ filter: theme === "light" ? "drop-shadow(#3b3dbf 300rem 0)" : "drop-shadow(rgb(255, 255, 255) 300rem 0)" }} src={calendarSvg} alt="calendar" />
                        <span>July 2020</span>
                    </div>
                    <More theme={theme} bdCol="#7fc4dc" bgCol="#e5f3f8" boxBg="#e5f3f8" />
                </div>
                <div className={classes.content}>
                    <div className={classes.top}>Goal for this Month</div>
                    <div className={classes.bottom} style={{ backgroundColor: theme === "light" ? "#e5f3f8" : "#333" }}>
                        <span className={classes.usedPrice}>$ 200</span>
                        <span className={classes.allPrice} style={{ color: theme === "light" ? "#222" : "#d9d9d9" }}>
                            $ 500
                        </span>
                    </div>
                </div>
            </div>
            <div className={classes.menu}>
                <MenuTitle theme={theme} title={"Your Goals"} bgCol="#e5f3f8" fCol="#7FC4DC" divBg="#e5f3f8" />
                <ul>
                    {menuData.map((item, index) => (
                        <LineList key={index} item={item} theme={theme} />
                    ))}
                </ul>
            </div>
        </div>
    );
}
